<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src='../../jquery-3.3.1.js'></script>
</head>

<body>
    <div id="container"></div>
    <button id="btn-change">change</button>
    <script>
        (function () {
            var data = [{
                    name: "张三",
                    age: 20,
                    address: '北京'
                },
                {
                    name: "李四",
                    age: 30,
                    address: '上海'
                },
                {
                    name: "王五",
                    age: 40,
                    address: '深圳'
                }
            ]

            function render(data) {
                // 获取容器
                var $container = $('#container');
                // 每次渲染时都清空容器
                $container.html('');

                // 创建table标签
                // var table=document.createElement('table');
                var $table = $('<table>');
                $table.append($('<tr><td>name</td><td>age</td><td>address</td></tr>'))
                data.forEach(element => {
                    $table.append($('<tr><td>' + element.name + '</td><td>' + element.age + '</td><td>' +
                        element.address + '</td></tr>'))
                });
                $container.append($table);
            }
            // 页面加载完成渲染data
            render(data);

            $("#btn-change").click(function () {
                data[1].age = 50;
                data[1].address = "成都"

                //  re-render 改变data后重新render
                render(data);
            })
        })();
    </script>
</body>

</html>